<template>
  <uni-popup ref="codePopup" type="dialog" class="popup-user">
    <view class="box-wrap">
      <view class="title-wrap">快捷码充电</view>
      <view class="info-wrap">
        <view class="input-wrap">
          <input
            placeholder-class="placeholder"
            v-model="code"
            placeholder="请输入终端快捷码"
            type="number"
            maxlength="30"
            :focus="inputFocus" />
        </view>
        <view class="tip">
          您可在设备端查找快捷充电码，扫描设备二维码失败情况下，可使用本方式代替扫码！
        </view>
      </view>
      <view class="btn-wrap">
        <button class="btn btn1" @tap="close">取消</button>
        <button class="btn btn2" @tap="tapConfirm">确认</button>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { queryConnectorByShortcutCode } from '@/service/apis/station';
import { getUserId } from '@/mixins/info';

const $toast: any = inject('$Toast');

const codePopup = ref();

let code = ref('');
const tapConfirm = () => {
  if (!code.value) {
    $toast('请输入终端快捷码');
    return;
  }
  queryConnectorByShortcutCode({
    userId: getUserId(),
    shortcutCode: code.value,
  }).then((res: any) => {
    close();
    uni.navigateTo({
      url: `/pages/charge/readyCharge?id=${res.id}`,
    });
  });
};

let inputFocus = ref(false);
const open = () => {
  code.value = '';
  codePopup?.value?.open();
  inputFocus.value = false;
  const timer = setTimeout(() => {
    inputFocus.value = true;
    clearTimeout(timer);
  }, 100);
};
const close = () => {
  inputFocus.value = false;
  codePopup?.value?.close();
};

defineExpose({
  open,
});
</script>

<style lang="scss">
@import '@/components/popupUser/index.scss';
</style>

<style lang="scss" scoped>
.popup-user .title-wrap {
  text-align: center;
}
.info-wrap {
  .input-wrap {
    display: flex;
    align-items: center;
    width: 278px;
    height: 38px;
    font-size: 14px;
    background-color: #f2f2f2;
    border-radius: 50px;
    input {
      width: calc(100% - 40px);
      margin: 0 20px;
    }
  }
  .tip {
    width: 278px;
    line-height: 22px;
    font-size: 12px;
    color: $uni-color-primary;
  }
}
</style>